<template>
  <div v-cloak>
    <!--导航条-->
    <headerTopNav v-bind:activeIndex="activeIndex"></headerTopNav>
    <!--首页主体部分  -->
    <div class="main"  style="background: rgba(229,233,242,0.2);" >
      <el-menu v-show="option < 4 " :default-active="activeIndex1" class="el-menu-demo" mode="horizontal" style="padding-left: 400px">
        <el-menu-item index="1" @click="initArticles(1)">推荐文章</el-menu-item>
        <el-menu-item index="2" @click="initArticles(2)">最热文章</el-menu-item>
        <el-menu-item index="3" @click="initArticles(3)">最新文章</el-menu-item>
      </el-menu>
      <div v-show="option == 4" style="height: 61px;line-height: 61px;font-size: 30px;font-weight: bolder;padding-left: 240px">搜索结果</div>

      <el-row type="flex"  justify="center">
        <!--文章列表展示部分-->

        <el-col :span="13" style="margin-top:8px;border: 1px solid lightgray;border-radius: 4px;">
          <el-empty description="当前为空哦~" v-if="articleList.length < 1" style="height: 1000px">
          </el-empty>
          <el-row v-for="a in articleList" class="article_body" type="flex" justify="center" style="padding:20px 0 ">
            <el-col :span="22" style="background-color:#fff;border-radius: 8px;height: 200px" class="article_item">

              <h2 style="text-align: center;border-bottom:1px solid #d3dce6;padding-bottom: 6px" v-text="a.title" @click="showDetail(a.id,a.user.id)">这里是文章标题</h2>
              <p style="height: 70px" v-text="a.summary"></p>
              <el-row>
                <div>
                  <el-col :span="5"><i class="iconfont icon-zuozhe" style="color: #5bc65b"></i> <span class="article_author_name" @click="showOtherInfo(a.user.id)">作者：&nbsp;  {{a.user.nickname}}</span></el-col>
                  <el-col :span="5"><i class="iconfont icon-yanjing" style="color: #5bc65b"></i> <span>浏览数：&nbsp; {{a.viewCount}}</span></el-col>
                  <el-col :span="5"><i class="iconfont icon-shoucang" style="color: #5bc65b"></i> <span>收藏数：&nbsp;  {{a.collectionCount}}</span></el-col>
                  <el-col :span="5"><i class="iconfont icon-dianzan" style="color: #5bc65b"></i> <span>点赞数：&nbsp;  {{a.likeCount}}</span></el-col>
                  <span style="float: right;color: red" v-if="a.weight == 1">推荐</span>
                </div>
              </el-row>
            </el-col>
          </el-row>
          <div class="block" style="margin-left: 35%">
            <el-pagination
                background
                :hide-on-single-page="true"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="pageSize"
                layout="prev, pager, next, jumper"
                :total="total">
            </el-pagination>
          </div>
        </el-col>
        <!--右侧栏位-->
        <right-bar></right-bar>
      </el-row>
    </div>
  </div>

</template>

<script >
import headerTopNav from "@/components/HeaderTop";
import rightBar from "@/components/RightBar";
export default {
  components: {headerTopNav,rightBar},
  name: "Index",
  data(){
    return {
      userId:'',
      currentPage:1,
      total:5,
      pageSize:5,
      activeIndex:'1',
      activeIndex1: '1',
      activeName: 'second',
      option:1,
      articleList:[],
      hotArticleList:[],
      newArticleList:[],
      title:'',
      cid:'',
    }
  },
  methods: {
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      if(this.option == 1){
        this.currentPage = val;
        this.getRecommendArticles()
      }else if(this.option == 2){
        this.currentPage = val;
        this.getHotArticles()
      }else if(this.option == 3){
        this.currentPage = val;
        this.getNewArticles()
      }else if(this.option == 4){
        this.currentPage = val;
        this.getSearchArticles(this.title)
      }else if(this.option == 5){
        this.currentPage = val;
        this.getSearchArticles(this.cid)
      }
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    showOtherInfo(uid){
      console.log(uid+'--------->'+this.userId)
      if(uid == this.userId){
        this.$router.push({
          path:'/personalCenter',
        })
        return;
      }
      this.$router.push({
        path:'/otherInfo',
        query:{
          authorId:uid,
        }
      })
    },
    getHotArticles() {
      let url = 'article/hotArticleList'
      this.$axios.get(url,{
        params:{
          now:this.currentPage,
        }
      })
          .then(res=>{
            if(res.data.code == 200){
              console.log(res.data.data.list)
              this.currentPage = res.data.data.pageNum;
              this.pageSize = res.data.data.pageSize;
              this.total = res.data.data.total;
              this.articleList = res.data.data.list;
            }
          })
    },
    getRecommendArticles(){
      this.activeIndex1 = "1";
      let url = 'article/recommendArticleList'
      this.$axios.get(url,{
        params:{
          now:this.currentPage,
        }
      })
          .then(res=>{
            if(res.data.code == 200){
              this.articleList = res.data.data.list;
              this.currentPage = res.data.data.pageNum;
              this.pageSize = res.data.data.pageSize;
              this.total = res.data.data.total;
              console.log(res)
            }
          })
    },
    getNewArticles() {
      let url = 'article/newArticleList'
      this.$axios.get(url,{
        params:{
          now:this.currentPage,
        }
      })
          .then(res=>{
            if(res.data.code == 200){
              this.articleList = res.data.data.list;
              this.currentPage = res.data.data.pageNum;
              this.pageSize = res.data.data.pageSize;
              this.total = res.data.data.total;
            }
          })
    },
    getSearchArticles(title){
      let url = 'article/articleList'
      this.$axios.get(url,{
        params:{
          aname:title,
          now:this.currentPage
        }
      })
          .then(res=>{
            if(res.data.code == 200){
              this.articleList = res.data.data.list;
              this.currentPage = res.data.data.pageNum;
              this.pageSize = res.data.data.pageSize;
              this.total = res.data.data.total;
            }
          })
      this.activeIndex='';
    },
    getArticlesByCateId(cid){
      let url = 'article/getArticlesByCateId'
      this.$axios.get(url,{
        params:{
          cateId:cid,
          now:this.currentPage
        }
      })
          .then(res=>{
            if(res.data.code == 200){
              this.articleList = res.data.data.list;
              this.currentPage = res.data.data.pageNum;
              this.pageSize = res.data.data.pageSize;
              this.total = res.data.data.total;
            }
          })
    },
    initArticles(option,title,cid){
      this.option = option;
      this.title = title;
      this.cid = cid;
      this.currentPage = 1;
      if(this.option == 1){
        //发送查询推荐文章的请求
        this.getRecommendArticles()
        // alert("推荐文章")
      }else if(this.option == 2){
        //发送查询最热文章的请求
        this.getHotArticles()
        // alert("最热文章")
      }else if(this.option == 3){
        //发送查询最新文章的请求
        this.getNewArticles()
        // alert("最新文章")
      }else if(this.option == 4){
        //根据标题查询的请求
        this.getSearchArticles(title)
        // alert(title)

      }else if(this.option == 5){
        //发送根据类别id查询的请求
        this.getArticlesByCateId(cid);
      }
    },
    showDetail(id,authorId){
      //将文章id传到文章展示页面
      this.$router.push({
        path:'/articleDetail',
        query: {
          articleId: id,
          authorId: authorId
        }
      });

    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    initUserInfo(){
      if(sessionStorage.getItem('userInfo')){
        this.userId = JSON.parse(sessionStorage.getItem('userInfo')).id;
      }
    }
  },
  created() {
    this.initArticles(1);
    this.initUserInfo();
  }
}
</script>

<style scoped>
  [v-cloak]{
    display: none;
  }

.article_item{
    padding: 0 40px;
  }
.article_body h2:hover{
  cursor: pointer;
  color: #f1da7f;
}



.article_author_name:hover{
  cursor: pointer;
  color: #5bc65b;
}
.article_author_name {
  width: 160px;
}

</style>